<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="删选课程">
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <!-- "course_id","student_id","staff_id","class_time","teacher_name","course_name","credit" -->
        <tr>
          <td>{{ item.course_id }}</td>
          <td>{{ item.course_name }}</td>
          <td>{{ item.teacher_name }}</td>
          <td>{{ item.staff_id }}</td>
          <td>{{ item.class_time }}</td>
          <td>{{ item.credit }}</td>
          <td>{{ item.credit_hours }}</td>
          <td>
            <v-btn
              variant="text"
              icon="mdi-delete"
              size="40px"
              @click="deleteC(item)"
            ></v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="selecting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        {{ selectmsg }}
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="selecting = false;this.getCourse()">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";

export default {
  async created() {
    let new_items = [];
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/student/selected_course_query",
      params: {
        student_id: this.$root.userinfo.id,
      },
    }).then((res) => {
      console.log(res);
      new_items = res.data;
    });
    this.items = new_items.data.data;
    console.log("initing items", this.items);
  },
  data() {
    return {
      selecting: false,
      selectmsg: "", //"student_name","student_id","semester","course_id","staff_id"
      headers: [
        { key: "course_id", align: "start", sortable: false, title: "课程号" },
        { key: "course_name", title: "课程名" },
        { key: "teacher_name", title: "教师名" },
        { key: "staff_id", title: "教师号" },
        { key: "class_time", title: "上课时间" },
        { key: "credit", title: "学分" },
        { key: "credit_hours", title: "学时" },
        { key: "delete", title: "删选" },
      ],
      items: [],
    };
  },
  methods: {
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    async deleteC(course) {
      console.log(course);
      //sname, student_id, semester, course_id, staff_id
      let student_id = this.$root.userinfo.id;
      let sname = this.$root.userinfo.name;
      let msg = "";
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/delete_course",
        params: {
          course_id: course.course_id,
          student_id: student_id,
        },
      }).then((res) => {
        console.log(res);
        msg = res.data.msg;
      });
      this.selectmsg = msg;
      this.selecting = true;
    },
    async getCourse() {
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/selected_course_query",
        params: {
          student_id: this.$root.userinfo.id,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data;
      });
      this.items = new_items.data.data;
      console.log("initing items", this.items);
    }
  },
};
</script>
